<template>
  <!-- 催收执行页-通讯录模块-案件批注 -->
  <section class="component case-remark">
    <!-- 按钮区域 -->
    <el-row type="flex" justify="space-between">
      <el-col :span="14" style="padding-left:10px;">
      </el-col>
      <el-col :span="10" style="min-width:360px;">
        <div style="float:right;padding-left:10px;padding-right:10px;" v-if="!isView && !isHiddenButton">
          <el-button @click="dialog.addCaseRemark = true">添加批注</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 数据区域 -->
    <data-box :height="280" :data="dataSet" :page="pageService">
      <template slot="columns">
        <!-- <el-table-column label="操作" :min-width="$helper.getColumnWidth(4)">
          <template slot-scope="scope">
            <el-button type="text" @click="modifyContent(scope)" >修改</el-button>
            <el-button type="text" @click="deleteContent(scope)" >删除</el-button>
          </template>
        </el-table-column> -->
        <el-table-column prop="createTime" label="时间" :min-width="$helper.getColumnWidth(5)" :formatter="(row) => $filter.dateTimeFormat(row.createTime)">
        </el-table-column>
        <el-table-column prop="operatorRealName" label="操作人" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="content" label="批注内容" :min-width="$helper.getColumnWidth(10)">
        </el-table-column>
      </template>
    </data-box>
    <el-dialog :title="this.modifyData.id?'修改批注':'添加批注'" :visible.sync="dialog.addCaseRemark" :close-on-press-escape="false" :close-on-click-modal="false" :append-to-body="true">
      <add-case-remark @close="dialog.addCaseRemark=false;refreshData()" :modifyData="modifyData" :caseId="caseId" ref="add-case-remark"></add-case-remark>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import DataBox from '~/components/common/data-box.vue';
import { Prop } from "vue-property-decorator";
import { Dependencies } from '~/core/decorator';
import { PageService } from '~/utils/page.service';
import { SortService } from '~/utils/sort.service';
import { CaseOperatorPageService } from '~/services/domain-service/case-operator-page.service.ts';
import AddCaseRemark from '~/components/collection-execution/operate-components/add-case-remark.vue';

@Component({
  components: {
    DataBox,
    AddCaseRemark,
  },
})
export default class CaseRemark extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;

  /**
   * caseId
   */
  @Prop({ type: String, required: true })
  private caseId: string;

  @Prop()
  private isView: boolean;

 @Prop()
  private isHiddenButton: boolean;
  private searchModel: any = {};
  private dataSet: any[] = [];
  private modifyData: any = {};
  private dialog: any = {
    addCaseRemark: false,
  };

  private refreshData() {
    this.modifyData = {}
    this.searchModel.caseId = this.caseId;
    this.caseOperatorPageService
      .caseRemark(this.searchModel, this.pageService)
      .subscribe((data) => {
        this.dataSet = data;
      });
  }
  //修改
  private modifyContent(scope){
    console.log(scope,"scope")
    this.modifyData = scope.row
    this.dialog.addCaseRemark = true
  }
  //删除
  private deleteContent(scope){
    this.caseOperatorPageService
      .deleteCaseRemark({id:scope.row.id})
      .subscribe((data) => {
        this.$message.success("删除批注成功")
        this.refreshData()
      });
  }


  private activated() {
    this.refreshData();
  }
}
</script>

<style lang="less" scoped>
</style>
